<template>
  <div class="app-container">
    <template>
      <div class="right-detail">
        <div class="cbox">
          <el-form
            class="form"
            :model="queryParam"
            ref="queryParam"
            :rules="rules"
            :inline="true"
            size="mini"
          >
            <!-- <el-row :gutter="12" class="row"> -->
            <!-- <el-col :span="4"> -->
            <el-form-item size="mini" label="标的编号:" prop="bidCode">
              <el-input clearable v-model="queryParam.bidCode" size="mini" style="width: 180px"></el-input>
            </el-form-item>
            <!-- </el-col> -->
            <!-- <el-col :span="4"> -->
            <el-form-item size="mini" label="标的名称:" prop="bidName">
              <el-input clearable v-model="queryParam.bidName" size="mini" style="width: 180px"></el-input>
            </el-form-item>
            <!-- </el-col> -->
            <!-- <el-col :span="4"> -->
            <el-form-item size="mini" label="标的状态:" prop="bidStatus">
              <el-select
                clearable
                v-model="queryParam.bidStatus"
                style="width: 180px"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in statusList"
                  :key="index"
                  :value="item.code"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- </el-col> -->
            <!-- <el-col :span="2"> -->
            <el-form-item>
              <el-button @click="searchType" type="primary">查询</el-button>
            </el-form-item>
            <!-- </el-col> -->
            <!-- </el-row> -->
          </el-form>
        </div>
        <split-pane split="horizontal" :default-percent="55" :max-percent="80" v-on:resize="resize">
          <!-- 上半部分 -->
          <template slot="paneL">
            <div class="top-type" ref="topType" style="top:49%">
              <!-- <div class="btn-area" ref="btnArea">
                <el-button plain size="mini" type="primary" @click="auditButton">查看竞价信息</el-button>
              </div>-->

              <!-- 状态（E-启用 N-未启用 D-停用） -->
              <el-table
                :data="TypeList"
                :height="typeHeight"
                highlight-current-row
                class="demand"
                @row-click="getCurrentTypeRow"
                border
                :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{}"
              >
                <el-table-column
                  size="mini"
                  show-overflow-tooltip
                  type="index"
                  label="序号"
                  align="center"
                  width="60"
                >
                  <template slot-scope="scope">
                    <span>{{ (Pagination.currentPage - 1) * Pagination.pageSize + scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="标的状态"
                  prop="bidStatus"
                  width="105"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  size="mini"
                  show-overflow-tooltip
                  prop="bidCode"
                  width="120"
                  align="center"
                  label="标的编号"
                ></el-table-column>
                <el-table-column
                  size="mini"
                  show-overflow-tooltip
                  prop="bidType"
                  width="80"
                  align="center"
                  label="标的类型"
                ></el-table-column>
                <el-table-column
                  size="mini"
                  show-overflow-tooltip
                  prop="bidName"
                  width="220"
                  align="center"
                  label="标的名称"
                ></el-table-column>
                <el-table-column
                  align="center"
                  label="是否与平台合作"
                  prop="bidPlatformTogether"
                  width="150"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.bidPlatformTogether == 'N'">否</span>
                    <span v-if="scope.row.bidPlatformTogether == 'Y'">是</span>
                  </template>
                </el-table-column>
                <el-table-column
                  size="mini"
                  show-overflow-tooltip
                  prop="bidAmount"
                  align="center"
                  label="运输总量（吨）"
                  width="120"
                ></el-table-column>
                <el-table-column
                  size="mini"
                  show-overflow-tooltip
                  prop="bidQuotations"
                  width="80"
                  align="center"
                  label="竞价方式"
                ></el-table-column>
                <el-table-column
                  size="mini"
                  show-overflow-tooltip
                  prop="bidOffer"
                  align="center"
                  label="单价竞价范围（元/吨）"
                  width="150"
                ></el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  align="center"
                  width="120"
                  prop="dptName"
                  label="标的来源"
                ></el-table-column>
                <el-table-column
                  size="mini"
                  show-overflow-tooltip
                  header-align="left"
                  align="left"
                  prop="bidRemark"
                  label="备注"
                ></el-table-column>
              </el-table>
              <div>
                <el-pagination
                  class="pagination"
                  small
                  background
                  ref="pagination"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="Pagination.currentPage"
                  :page-sizes="Pagination.pageSizeList"
                  :page-size="Pagination.pageSize"
                  :layout="Pagination.layout"
                  :total="Pagination.total"
                ></el-pagination>
              </div>
            </div>
          </template>

          <!-- 下半部分 -->
          <template slot="paneR">
            <div class="codeNumberCode" style="background-color: #fff;">需求信息</div>
            <div class="bottom-code" ref="bottomCode" style="background-color: #fff;">
              <div class="btn-area" ref="detlArea">
                <el-button plain size="mini" type="primary" @click="queryBiddingButton">查看需求报名情况</el-button>
              </div>
              <el-table
                :height="detlHeight"
                :data="currentCodeList"
                highlight-current-row
                @row-click="getCurrentCodeRow"
                border
                :header-cell-style="{
                  textAlign: 'center'
                }"
                :cell-style="{}"
              >
                <el-table-column
                  show-overflow-tooltip
                  type="index"
                  :index="indexMethodDet"
                  label="序号"
                  width="60"
                  align="center"
                ></el-table-column>
                <el-table-column
                  size="mini"
                  show-overflow-tooltip
                  width="120"
                  align="left"
                  prop="demandCode"
                  label="需求编号"
                ></el-table-column>
                <el-table-column show-overflow-tooltip align="center" prop="brand" label="货物品牌"></el-table-column>
                <el-table-column show-overflow-tooltip align="center" prop="dailyOutput" label="规格"></el-table-column>
                <el-table-column
                  size="mini"
                  show-overflow-tooltip
                  prop="product"
                  align="center"
                  label="产品大类"
                ></el-table-column>
                <el-table-column
                  size="mini"
                  show-overflow-tooltip
                  prop="kind"
                  align="center"
                  label="品种"
                ></el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  align="center"
                  prop="transportType"
                  label="运输类型"
                ></el-table-column>
                <el-table-column
                  size="mini"
                  show-overflow-tooltip
                  prop="transportMode"
                  align="center"
                  label="运输方式"
                ></el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  align="center"
                  prop="transportQuantity"
                  label="运输数量(吨)"
                  width="120"
                ></el-table-column>
                <el-table-column show-overflow-tooltip align="center" prop="dptName" label="需求来源"></el-table-column>
                <el-table-column
                  size="mini"
                  show-overflow-tooltip
                  prop="remark"
                  align="center"
                  label="备注"
                ></el-table-column>
                <el-table-column show-overflow-tooltip width="150" align="center" label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      plain
                      @click="showTransportMethod(scope.row)"
                    >线路详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </split-pane>
      </div>
    </template>

    <!-- 竞价结果推荐 -->
    <el-dialog
      title="竞价信息"
      width="60%"
      :visible.sync="openDialog"
      v-if="openDialog"
      v-el-drag-dialog
      :before-close="close"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <el-table
        :height="detlHeight"
        :data="biddingResultList"
        highlight-current-row
        border
        :header-cell-style="{
          textAlign: 'center'
        }"
        :cell-style="{}"
      >
        <el-table-column
          show-overflow-tooltip
          type="index"
          :index="indexMethodDet"
          label="序号"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          size="mini"
          show-overflow-tooltip
          width="380"
          align="center"
          prop="usrName"
          label="已报名供应商"
        ></el-table-column>
        <el-table-column
          size="mini"
          show-overflow-tooltip
          prop="signUpTime"
          align="center"
          label="报名时间"
        ></el-table-column>
        <el-table-column
          align="center"
          label="是否参与竞价"
          prop="biddingStatus"
          width="130"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-if="scope.row.biddingStatus == 'N'">未竞价</span>
            <span v-if="scope.row.biddingStatus == 'Y'">已竞价</span>
          </template>
        </el-table-column>
        <!--        <el-table-column size="mini" show-overflow-tooltip prop="biddingPrice" align="center" label="竞价金额">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ currentType.bidStatus === '竞价中' ? 'xxx' : scope.row.biddingPrice }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column size="mini" show-overflow-tooltip prop="biddingTime" align="center" label="竞价时间"></el-table-column>-->
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click=";(openDialog = false), (this.currentCode = [])" size="mini">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog
      width="40%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-el-drag-dialog
      title="线路详情"
      :visible.sync="tranDialogInfoDialogVisible"
      v-if="tranDialogInfoDialogVisible"
      :before-close="handleTypeDialogClose"
    >
      <el-table
        :data="tranDialogInfoList"
        :height="detlHeight"
        highlight-current-row
        border
        :header-cell-style="{
          textAlign: 'center'
        }"
        :cell-style="{}"
      >
        <el-table-column type="index" width="60" align="center" label="序号"></el-table-column>
        <el-table-column show-overflow-tooltip align="center" label="起始地" prop="site"></el-table-column>
        <el-table-column show-overflow-tooltip align="center" label="目的地" prop="destination"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          type="primary"
          @click="
            tranDialogInfoDialogVisible = false
            tranDialogInfoList = []
          "
        >关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { auditBiddingMethod, bidListDetail, queryBiddingInfoList, queryBiddingList, queryDemandLine } from '@/request/api'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
import scrollChange from '@/utils/onscroll.js'

export default {
  mixins: [resizeMixin, paginationMixin],
  data() {
    var RVNAME = (rule, value, callback) => {
      // 获得字符串实际长度，中文2，英文1
      var realLength = 0,
        len = value.length,
        charCode = -1
      for (var i = 0; i < len; i++) {
        charCode = value.charCodeAt(i)
        if (charCode >= 0 && charCode <= 128) realLength += 1
        else realLength += 2
      }
      if (realLength > 32) {
        return callback(new Error('最多为32位'))
        // this.companyName = cutstr(this.companyName, 60);
      } else {
        return callback()
      }
    }
    var RVREMARK = (rule, value, callback) => {
      // 获得字符串实际长度，中文2，英文1
      var realLength = 0,
        len = value.length,
        charCode = -1
      for (var i = 0; i < len; i++) {
        charCode = value.charCodeAt(i)
        if (charCode >= 0 && charCode <= 128) realLength += 1
        else realLength += 2
      }
      if (realLength > 128) {
        return callback(new Error('最多为128位'))
        // this.companyName = cutstr(this.companyName, 60);
      } else {
        return callback()
      }
    }
    return {
      queryParam: {
        bidCode: '', // 标的编号
        bidStatus: '', // 标的状态
        bidName: '' //标的名称
      },
      diaTableData: [], // 弹出框需求信息数据
      statusList: [
        { code: 'ZT', name: '暂停竞价' },
        { code: 'BZ', name: '报名中' },
        { code: 'BJ', name: '报名结束' },
        { code: 'JZ', name: '竞价中' },
        { code: 'JJ', name: '竞价结束' }
      ],
      currentPage: 1,
      pageSize: 30,
      pageTotal: 0,

      openDialog: false, //竞价结果推荐弹框
      biddingResultList: {}, //竞价结果推荐数据

      tranDialogInfoList: [],
      tranDialogInfoDialogVisible: false, //线路详情Dialog

      currentRow: '',
      codeentRow: '',
      typeHeight: -1,
      detlHeight: -1,
      CodeRCTUUID: false,
      CodeRVDOMAIN: false,
      checkedY: true,
      checkedN: false,
      flt: {
        rvDomain: '',
        rvName: ''
      },
      copyDomain: '',
      copyName: '',
      rleTypes: [],
      TypeMap: {
        updateType: 'baseCode.editClassify',
        createType: 'baseCode.addClassify'
      },
      CodeMap: {
        updateCode: 'baseCode.editCode',
        createCode: 'baseCode.addCode'
      },
      TypeDialogStatus: '',
      CodeDialogStatus: '',
      currentNode: {},
      currentType: {},
      TypeList: [],
      currentCodeList: [],
      currentCode: {},
      RefTypeDialogVisible: false, // 审核 Dialog
      RefCodeDialogVisible: false, // 基础代码 Dialog
      dialogForm: {},
      dialogText: {
        title: '',
        show: false,
        button: {
          t: '',
          f: ''
        },
        qeuryButtonShow: false,
        paginationShow: false
      },
      // 代码分类
      RefTypeData: {}, // 代码分类 dialog内的form([A-Z]|\d)[0-9a-zA-Z]
      rules: {
        RV_DOMAIN: [
          { min: 1, max: 4, message: '至多输入4 个字符', trigger: 'change' },
          {
            pattern: /^([^\u4e00-\u9fa5])+$/,
            message: '禁止输入中文',
            trigger: 'change'
          }
        ],
        RV_NAME: [
          { validator: RVNAME, trigger: 'change' },
          {
            pattern: /^([0-9a-zA-Z\u4e00-\u9fa5])+$/,
            message: '只能输入中文字母数字',
            trigger: 'change'
          }
        ]
      },
      RefTypeDataRules: {
        rvDomain: [
          // { validator: RVDOMAIN, trigger: 'change' },
          { min: 1, max: 4, message: '至多输入4个字符', trigger: 'change' },
          { required: true, message: '请填写类型编号', trigger: 'blur' }
          // {
          //   pattern: /^([^\u4e00-\u9fa5])+$/,
          //   message: '禁止输入中文',
          //   trigger: 'change'
          // }
        ],
        rvName: [
          { required: true, message: '请填写类型名称', trigger: 'blur' },
          { validator: RVNAME, trigger: 'change' },
          {
            pattern: /^([0-9a-zA-Z\u4e00-\u9fa5])+$/,
            message: '只能输入中文字母数字',
            trigger: 'change'
          }
        ],
        rvIsvalid: [{ required: true, message: '请选择有效标志', trigger: 'blur' }],
        rvRemark: [{ validator: RVREMARK, trigger: 'change' }]
      },
      // 基础代码
      RefCodeData: {}, // 代码分类 dialog内的form
      RefCodeDataRules: {
        rvDomain: [{ required: true, message: '请选择代码类型', trigger: 'change' }],
        rvLowValue: [
          { min: 1, max: 4, message: '至多输入4个字符', trigger: 'change' },
          {
            pattern: /^([^\u4e00-\u9fa5])+$/,
            message: '禁止输入中文',
            trigger: 'change'
          },
          { required: true, message: '请填写代码编号', trigger: 'blur' }
        ],
        rvCmeaning: [
          { required: true, message: '请填写代码名称', trigger: 'blur' },
          { validator: RVNAME, trigger: 'change' }
          // {
          //   pattern: /^([0-9a-zA-Z\u4e00-\u9fa5])+$/,
          //   message: '只能输入中文字母数字',
          //   trigger: 'change'
          // }
        ],
        rvIsvalid: [{ required: true, message: '请选择有效标志', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.resize = () => {
      this.typeHeight = this.$refs.topType.offsetHeight - 40
      // 70
      this.detlHeight = this.$refs.bottomCode.offsetHeight - 100
      // 130
    }
  },
  mounted() {
    let demandWrapper = document.querySelector('.demand .el-table__body-wrapper') // 新增滚动条监听事件
    scrollChange(demandWrapper)
  },
  beforeMount() {
    this.refreshList()
  },
  computed: {
    grandson() {
      var dataList = []
      var number
      var arr = this.$route.path.split('/')
      number = arr.length - 1
      dataList = this.$store.state.user.permList
      for (var i = 0; i < dataList.length; i++) {
        for (var f = 0; f < dataList[i].Children.length; f++) {
          if (dataList[i].Children[f].MDL_CODE == arr[number]) {
            return dataList[i].Children[f].Grandson
          }
        }
      }
      return []
    },
    disableType() {
      return this.TypeDialogStatus === 'updateType'
    }
  },
  methods: {
    dialogBeforeClose(done) {
      this.$confirm('确认关闭?')
        .then(() => {
          done()
        })
        .catch(() => {})
    },

    checkCode() {
      this.flt.RV_DOMAIN = this.flt.RV_DOMAIN.replace(/[^a-zA-Z]/g, '')
    },
    typecheck() {
      this.RefTypeData.RV_DOMAIN = this.RefTypeData.RV_DOMAIN.replace(/[^a-zA-Z]/g, '')
    },
    codecheck() {
      this.RefCodeData.RV_DOMAIN = this.RefCodeData.RV_DOMAIN.replace(/[^a-zA-Z]/g, '')
    },
    uppercase(key) {
      this.$refs.typePagination.lastEmittedPage = 1
      this.$refs.codePagination.lastEmittedPage = 1
      this.flt[key] = this.flt[key].toUpperCase()
    },
    // typeuppercase(key) {
    //   this.RefTypeData[key] = this.RefTypeData[key].toUpperCase()
    // },
    codeuppercase(key) {
      this.RefCodeData[key] = this.RefCodeData[key].toUpperCase()
    },
    getFltType() {
      addCodeTableXL({}).then(res => {
        if (res.success === '1') {
          this.rleTypes = res.data
        }
      })
    },
    searchType() {
      this.$refs.queryParam.validate(valid => {
        if (valid) {
          this.Pagination.currentPage = 1
          this.getList(this.Pagination.currentPage, this.Pagination.pageSize, this.updatePaginationTotal)
        }
      })
    },
    //获取列表
    getList(currentPage, pageSize, updateTotal) {
      this.currentCodeList = []
      this.RefTypeData = {}
      this.currentCode = {}
      queryBiddingList({
        bidCode: this.queryParam.bidCode,
        bidName: this.queryParam.bidName,
        bidStatus: this.queryParam.bidStatus,
        bidAuditstatus: 'Y',
        bidBiddingstatus: 'Y',
        monitorStatus: 'B', //报名监控
        PageIndexs: this.Pagination.currentPage.toString(),
        PageSizes: this.Pagination.pageSize.toString()
      }).then(response => {
        this.TypeList = response.data
        updateTotal(Number(response.total))
      })
    },

    // 审核
    auditButton() {
      if (Object.keys(this.RefTypeData).length == 0) {
        this.$alert('请选择需要审核的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }

      if (this.RefTypeData.bidAuditstatus === 'Y') {
        this.$alert('请选择未审核的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.TypeDialogStatus = 'createType'
      this.RefTypeDialogVisible = true
    },
    // 取消审核
    delAuditButton() {
      if (Object.keys(this.RefTypeData).length == 0) {
        this.$alert('请选择需要取消审核的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }

      if (this.RefTypeData.bidAuditstatus === 'N') {
        this.$alert('请选择已审核的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确定要取消审核该数据吗？', '提示', {
        confirmButtonText: '确定'
      }).then(() => {
        auditBiddingMethod({ bidId: this.currentType.bidId, bidAuditstatus: 'N' }).then(res => {
          if (res.success === '1') {
            this.$message({
              type: 'success',
              message: '取消审核成功'
            })
            this.RefTypeDialogVisible = false
            this.RefTypeData = {}
            this.refreshList()
          }
        })
      })
    },

    // 确认审核
    auditTrue() {
      this.$confirm('您确定要审核该数据吗？', '提示', {
        confirmButtonText: '确定'
      }).then(() => {
        auditBiddingMethod({ bidId: this.RefTypeData.bidId, bidAuditstatus: 'Y' }).then(res => {
          if (res.success === '1') {
            this.$message({
              type: 'success',
              message: '审核成功'
            })
            this.RefTypeDialogVisible = false
            this.RefTypeData = {}
            this.refreshList()
          }
        })
      })
    },

    getCurrentTypeRow(row) {
      this.currentCode = []
      this.currentPage = 1
      this.pageSize = 30
      this.pageTotal = 0
      this.currentType = row
      this.RefTypeData = Object.assign({}, row)
      bidListDetail({
        bidId: row.bidId
      }).then(res => {
        if (res.success == 1) {
          this.currentCodeList = res.data
        }
      })
    },

    //查看竞价结果
    queryBiddingButton() {
      if (Object.keys(this.currentCode).length == 0) {
        this.$alert('请选择需求信息！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      console.log(this.currentType)
      queryBiddingInfoList({
        bidId: this.RefTypeData.bidId,
        sugarId: this.currentCode.sugarId
      }).then(res => {
        if (res.success == 1) {
          this.openDialog = true
          this.biddingResultList = res.data
        }
      })
    },

    // dialog 查看线路详细信息
    showTransportMethod(val) {
      queryDemandLine({
        sugarId: val.sugarId
      }).then(res => {
        if (res.success == 1) {
          this.tranDialogInfoList = res.data
        }
      })
      this.tranDialogInfoDialogVisible = true
    },

    // 点击基础代码表格的一行，获取到当前行的数据
    getCurrentCodeRow(row) {
      this.codeentRow = '1'
      this.currentCode = row
    },
    handleSizeChangeA(val) {
      this.pageSize = val
      this.getRefCode()
    },
    handleCurrentChangeA(val) {
      this.currentPage = val
      this.getRefCode()
    },
    handleTypeDialogClose() {
      this.RefTypeDialogVisible = false
    },
    handleCodeDialogClose() {
      this.RefCodeDialogVisible = false
    },
    // restet 基础代码
    resetRefCode() {
      return (this.RefCodeData = {
        // RCT_UUID: '',
        // RV_DOMAIN: '',
        // RV_CMEANING: '',
        // RV_NAME: '',
        // RV_ISVALID: 'Y',
        rvDomain: '',
        rvTerId: '-1',
        rvLowValue: '',
        rvCmeaning: '',
        rvIsvalid: 'Y'
        // rvInsertuser:'',
        // rvLstupduser:'',
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .splitter-pane-resizer.horizontal {
  margin-top: -15px;
}

.app-container {
  overflow: hidden;
  background-color: #fff;
  position: relative;
  height: 100%;
}

.tree {
  padding-right: 20px;
  font-size: 1.4rem;
}

.right-detail {
  height: 100%;

  .top-type {
    width: 100%;
    height: 100%;

    table {
      max-width: 100%;
      font-size: 1.4rem;
    }
  }

  .bottom-code {
    width: 100%;
    height: 100%;
  }
}

.codeNumberCode {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 20px;
}
.basicInfoBox {
  border: 1px solid #cccccc;
  border-radius: 5px;
  padding-top: 25px;
  padding-bottom: 10px;
}
</style>
